<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>报名信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="onFormSubmit">提交报名信息</el-button>
                </div>
            </div>
            <table class="custom-table" style="margin-bottom:10px;">
                <tr><td class="tr-title">项目名称</td><td>{{row.name}}</td></tr>
            </table>
            <el-form ref="applyForm" size="mini">
                <el-table :data="tableData" :key="keys" style="width: 100%;" ref="table" stripe>
                    <el-table-column prop="name" label="劳务分类名称"></el-table-column>
                    <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                    <el-table-column prop="remarks" label="备注">
                        <template slot-scope="scope">
                            <el-popover
                            placement="top"
                            width="200"
                            trigger="click"
                            :content="scope.row.remarks">
                            <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                        </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <table class="custom-table" style="margin-top:10px;">
                <tr><td class="tr-title wally-label">上传报名资料</td><td>
                    <label>{{otherQualification}}</label>
                    <el-button size="small" @click="initPriceUpload" type="primary">选择文件</el-button>
                    <input type="file" accept="application/pdf" ref="priceFile" @change="priceChange" style="display: none;" />
                </td></tr>
                <tr>
                    <td class="tr-title">温馨提示</td>
                    <td>请按照招标文件上传相关资料</td>
                </tr>
                <tr><td class="tr-title">备注</td>
                    <td><el-input type="textarea" v-model="remarks"></el-input>
                    </td>
                </tr>
            </table>
        </el-card>

    </div>
</template>

<script>
    import { uploads } from "@/api/common_api"
    import { bidPurchaseSupplierQuote} from "@/api/labour_purchase_api"
    export default {
        props: ['row'],
        data() {
            return {
                remarks:"",//说明
                qualification:"",//资质 后端
                otherQualification:"",//临时资质
                tableData:[],//原列表数据
                keys:0,//原列表
            };
        },
        filters: {
            formatData(value) {
                if (!value) {
                    return ''
                }
                return moment(value).format("YYYY-MM-DD")
            },
            formatTime(value) {
                if (!value) {
                    return ''
                }
                return moment(value).format("YYYY-MM-DD HH:mm:ss")
            },
            ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            }
        },
        mounted(){
            if(this.row.purchaseGoodsDetail){//物资字符串转数组
                this.tableData = JSON.parse(this.row.purchaseGoodsDetail);
            }
        },
        methods: { 
            //文件上传
            initPriceUpload(){
                this.$refs.priceFile.click();
            },
            async priceChange(e){
                e.preventDefault();
                let _this = this;
                let file = e.target.files[0];
                if(file===undefined){return;}
                let formData = new FormData();
                formData.append("resType",file);
                const {code,data} = await uploads('enrollData',formData);
                if(code === 200){
                    this.otherQualification = file.name;//临时储存
                    this.qualification = data//传给后端
                    e.target.value = "";
                }
            },
            //提交报名
            onFormSubmit(){
                this.$confirm("确认提交", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(async () => {
                let params = {};
                params.bidId = this.row.id;
                params.qualification = this.qualification;//报名资料
                params.remarks = this.remarks;//说明
                params.quoteLabourDetailVOS = this.tableData;//物资
                let { code } = await bidPurchaseSupplierQuote(params);
                if(code === 200){
                    this.$message.success("报价成功");
                    this.onClose();
                }
                }).catch(() => {});
            },
            clear(){
                this.remarks="";//说明
                this.qualification="";//资质 后端
                this.otherQualification="";//临时资质
                this.tableData=[];//原列表数据
            },
            //关闭报价
            onClose(){
                this.clear();
                this.$emit('on-cancel-click','enroll');
            }
        }
    };
    </script>
    
    <style>
        .wally-label:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    </style>